<template>
<div style="border: 1px solid #E8E8E8;border-bottom: none;">
  <el-table :data="datas" :header-cell-style="{background:'#F5F7FA'}" max-height="586px">
    <el-table-column label="菜单名称" width="300px">
      <template slot-scope="scope">
        <el-checkbox :indeterminate="scope.row.isIndeterminate" :disabled="!isUpdatable"  v-model="scope.row.checkAll" @change="(val)=>{handleCheckAllChange(val,scope)}">{{scope.row.menuName}}</el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="动作">
      <template slot-scope="scope">
        <el-checkbox-group  :disabled="!isUpdatable" v-model="scope.row.checkedOptionsId" @change="(val)=>{handleCheckedCitiesChange(val,scope)}">
          <el-checkbox v-for="option in scope.row.options" :label="option.id" :key="option.id">
            <el-tooltip  effect="dark" :content="option.name" placement="top" :disabled="!isTextLenOver(option.name,4)">
              <div style="display: flex;align-items: center;">
                <span style="width: 5em;  display: inline-block;" class="text-omit-style">{{option.name}}</span>
              </div>
            </el-tooltip>
          </el-checkbox>
        </el-checkbox-group>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import {getMenuList} from '../../../../api/customer/role'
const uniq = require('lodash/uniq')
export default {
  name: 'FunctionAuthorization',
  props: {
    id: {
      type: Number,
      default: null
    },
    isUpdatable: {
      type: Boolean,
      default: false
    },
    defaultCheckedMenuIdList: {
      type: Array,
      default: function () {
        return []
      }
    }

  },
  created () {
    this.getMenuListReq()
  },
  data () {
    return {
/*      datas: [
        {checkAll: false,
          isIndeterminate: false,
          options: [{id: 1, name: '增加'}, {id: 2, name: '查询'}, {id: 3, name: '删除'}, {id: 4, name: '修改'}],
          checkedOptionsId: [],
          menuName: '人员证书-证书查询'},
        {checkAll: false,
          isIndeterminate: false,
          options: [{id: 5, name: '增加'}, {id: 6, name: '查询'}, {id: 7, name: '删除'}, {id: 8, name: '修改'}],
          checkedOptionsId: [],
          menuName: '人员证书-证书修改'}
      ] */
      datas: []
    }
  },
  methods: {
    handleCheckAllChange (val, scope) {
      scope.row.checkedOptionsId = val ? scope.row.options.map(item => item.id) : []
      scope.row.isIndeterminate = false
      // this.$emit('changeMenuIdList', this.getSelectedMenuIdList(this.datas))
    },
    handleCheckedCitiesChange (val, scope) {
      let checkedCount = val.length
      scope.row.checkAll = scope.row.options.length !== 0 && checkedCount === scope.row.options.length
      scope.row.isIndeterminate = checkedCount > 0 && checkedCount < scope.row.options.length
      // this.$emit('changeMenuIdList', this.getSelectedMenuIdList(this.datas))
    },
    // 初始化数据，添加全选半选标志，获取每个节点默认选中id列表
    init (menuList = [], checkedMenuIdList = []) {
      menuList.forEach((item) => {
        let optionIdList = item.options.map(item => item.id)
        if (optionIdList.length > 0) {
          // 通过比对选中的id列表，分别设置各个选项的选中值
          item.checkedOptionsId = optionIdList.filter((id) => {
            if (id && checkedMenuIdList.indexOf(id) > -1) {
              return id
            }
          })
          // 根据选中值设置全选半选标志
          let optionLen = item.options.length
          let checkedOptionLen = item.checkedOptionsId.length
          if (checkedOptionLen !== 0 && optionLen === checkedOptionLen) {
            item.isIndeterminate = false
            item.checkAll = true
          } else if (checkedOptionLen > 0) {
            item.isIndeterminate = true
            item.checkAll = false
          } else {
            item.isIndeterminate = false
            item.checkAll = false
          }
        }
      })
      // this.$emit('changeMenuIdList', this.getSelectedMenuIdList(this.datas))
    },
    // 外部组件获取数据的方法
    getSelectedMenuIdList () {
      let idList = []
      this.datas.forEach((item) => {
        idList = [...idList, ...item.checkedOptionsId]
        if (item.checkAll || item.isIndeterminate) {
          idList = [...idList, ...item.menuIds]
        }
      })
      return uniq(idList)
    },
    getMenuListReq () {
      getMenuList(({data}) => {
        let menuList = []
        menuList = data.map((item) => {
          let menuItem = {}
          menuItem['menuName'] = item.catalogName + '-' + item.name
          menuItem['menuIds'] = [item.catalogId, item.id]
          menuItem['options'] = item.actionList ? [...(item.actionList)] : []
          menuItem['checkedOptionsId'] = []
          menuItem['checkAll'] = false
          menuItem['isIndeterminate'] = false
          return menuItem
        })
        this.datas = menuList
        // this.setIsCheckedAll(this.datas)
      })
    },
    // 判断字数是否大于四个
    isTextLenOver (str = '', limit = 0) {
      return str.length > limit
    }
  },
  computed: {
  },
  watch: {
    defaultCheckedMenuIdList: {
      handler: function (val) {
        this.$nextTick(() => {
          this.init(this.datas, val)
        })
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.text-omit-style{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
